<template>
  <div class="invest-column">
    <Echarts :options="options" height="100%" width="100%"> </Echarts>
  </div>
</template>

<script>
import Echarts from "./echarts.vue"
import cockpitApi from '@/api/investment/cockpit'
let colorList = ["#C6BC5C", "#0DAEE3", "#5A70BC", "#67D470", "#489BFF"];

export default {
  name: "investColumn",
  props: ['times'],
  components: {
    Echarts,
  },
  watch: {
    times: {
      handler(newVal) {
        this.paramsObj.searchBeginTime = newVal && newVal[0]
        this.paramsObj.searchEndTime = newVal && newVal[1]

        this.initOptions()
      },
      deep: true,
      immediate: true
    }
  },
  data() {
    return {
      paramsObj: {
        searchBeginTime: "",
        searchEndTime: ""
      },
      options: {
        backgroundColor: "transparent",
        grid: {
          containLabel: true,
          left: 0,
          right: 10,
          bottom: 0,
          top: 5,
        },
        tooltip: {
          show: true,
          formatter: "{b} <br> {c}亿",
        },

        xAxis: [
          {
            axisTick: {
              show: false,
              // color:'#fff',
            },
            axisLine: {
              show: false,
            },
            axisLabel: {
              color: "#7591B2",
              fontSize: 12,
              interval: 0,
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: "#384267",
                type: "dashed",
              },
            },
            splitArea: {
              show: false
            },
          },
        ],
        yAxis: [
          {
            type: "category",
            data: [],

            axisTick: {
              show: false,
            },
            axisLabel: {
              color: "#B5C5D4",
              textStyle: {
                color: "#7E90AB",
              },
            },
            axisLine: {
              lineStyle: {
                color: "#2B446D",
                width: 1,
              },
              show: true,
            },
            
            splitArea: {
              show: false
            },
          },
        ],
        series: [
          {
            name: " ",
            type: "bar",
            barWidth: 8,
            silent: true,
            itemStyle: {
              normal: {
                color: "#14273F",
                barBorderRadius: [0, 0, 0, 0],
              },
            },
            barGap: "-100%",
            barCategoryGap: "50%",
            data: [],
          },
          {
            name: " ",
            type: "bar",
            barWidth: 8,
            label: {
              normal: {
                show: false,
                position: "top",
                formatter: "{c}%",
              },
            },
            data: [],
          },
        ],
      },
    }
  },
  methods: {
    async initOptions() {
      const {data} = await cockpitApi.getInduceDistribution(this.paramsObj)      
      console.log("🚀 ~ initOptions ~ data:", data)

      let max = 0

      data.forEach(item => {
        if(max < item.content) {
          max = item.content
        }
      })
      
      let maxData = data.map(item => max)

      let color =[
        {
          itemStyle: {
            normal: {
              barBorderRadius: [0, 0, 0, 0],
              color: {
                type: "bar",
                colorStops: [
                  {
                    offset: 0,
                    color: "#8DC099", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "#64B06A", // 100% 处的颜色
                  },
                ],
                globalCoord: false, // 缺省为 false
              },
            },
          },
        },
        {
          itemStyle: {
            // normal:{color:'#b250ff',barBorderRadius:[0,10,10,0],}
            normal: {
              barBorderRadius: [0, 0, 0, 0],
              color: {
                type: "bar",
                colorStops: [
                  {
                    offset: 0,
                    color: "#D8B373", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "#C49554", // 100% 处的颜色
                  },
                ],
                globalCoord: false, // 缺省为 false
              },
            },
          },
        },
        {
          itemStyle: {
            // normal:{color:'#4f9aff',barBorderRadius:[0,10,10,0],}
            normal: {
              barBorderRadius: [0, 0, 0, 0],
              color: {
                type: "bar",
                colorStops: [
                  {
                    offset: 0,
                    color: "#557CAA", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "#9DAFCA", // 100% 处的颜色
                  },
                ],
                globalCoord: false, // 缺省为 false
              },
            },
          },
        },
        {
          itemStyle: {
            // normal:{color:'#4bf3ff',barBorderRadius:[0,10,10,0],  },
            normal: {
              barBorderRadius: [0, 0, 0, 0],
              color: {
                type: "bar",
                colorStops: [
                  {
                    offset: 0,
                    color: "#383AA2", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "#5D51B9", // 100% 处的颜色
                  },
                ],
                globalCoord: false, // 缺省为 false
              },
            },
          },
        },
        {
          itemStyle: {
            // normal:{color:'#ffa800',barBorderRadius:[0,10,10,0],}
            normal: {
              barBorderRadius: [0, 0, 0, 0],
              color: {
                type: "bar",
                colorStops: [
                  {
                    offset: 0,
                    color: "#2E78DD", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "#59ADED", // 100% 处的颜色
                  },
                ],
                globalCoord: false, // 缺省为 false
              },
            },
          },
        },
      ]

      let seriesData = data.map((item, index) => {
        return {
          value: item.content,
          itemStyle: color[index],
        }
      })
      let yAxis = data.map(item => item.name)

      this.$set(this.options.yAxis[0], 'data', yAxis)
      this.$set(this.options.series[0], 'data', maxData)
      this.$set(this.options.series[1], 'data', seriesData)

    }
  }
};
</script>

<style lang="scss" scoped>
.invest-column {
  width: 100%;
  height: 100%;
}
</style>
